<template>
	<view class="detail">
		<view class="backgroudImg" :style="{'background-image':'url(' + songInfo.al.picUrl + ')'}"></view>
		<navbar :appname="songInfo.name" :icon="iconshow" :textColor="color" v-show="flag"></navbar>
		<view class="container" v-show="flag">
			<scroll-view scroll-y="true">
				<view class="music-player" @tap="handleToPlay">										
					<image :src="songInfo.al.picUrl" :class="{'detail-play-run':isPlayRotate}"></image>
					<text class="iconfont" :class="iconPlay"></text>
					<view></view>
				</view>
				<view class="detail-lyric">
					<view class="detail-lyric-wrap" :style="{'transform':'translateY('+ -(lyricIndex-1)*82 +'rpx)'}">
						<view class="detail-lyric-item" :class="{active: lyricIndex==index}"v-for="(item,index) in lyricInfo" :key="index">{{item.lyric}}</view>						
					</view>
				</view>
				<view class="detail-like">
					<view class="like-head">喜欢这首歌的人也听</view>
					<view class="like-item" v-for="(item,index) in simiInfo" :key="index">
						<view class="like-item-img">
							<image :src="item.album.picUrl"></image>
						</view>
						<view class="like-song">
							<view>{{item.name}}</view>
							<view>
								<image src="../../static/logo.png"></image>
								<!-- <image src="../../static/logo.png"></image> -->
								<view>{{item.album.artists[0].name}} - {{item.name}}</view>
							</view>
						</view>
						<text class="iconfont icon-bofang1" @tap="handleToSimi(item.id)"></text>
					</view>
				</view>
				<view class="detail-comment">
					<view class="detail-comment-head"> 精彩评论</view>
					<view class="comment-item" v-for="(item,index) in commentInfo" :key="index">
						<view class="comment-icon">
							<image :src="item.user.avatarUrl"></image>
						</view>
						<view class="comment-content">
							<view class="comment-content-head">
								<view class="comment-people-info">
									<view>{{item.user.nickname}}</view>
									<view>{{item.time | formatTime}}</view>
								</view>
								<view class="comment-like">
									{{item.likedCount | formatCount}} <text class="iconfont icon-dianzan"></text>
								</view>
							</view>						
							<view class="comment-content-words">{{item.content}}</view>
						</view>
					</view>
					
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import '@/common/iconfont.css';
	import navbar from '@/components/navbar/navbar.vue';
	import {songDetails,simiSong,commentMusic,lyric,songUrl} from '../../common/api.js';
	export default {
		components:{
			navbar
		},
		data() {
			return {
				iconshow:true,
				flag:false,
				color:"white",
				songInfo:{
					name:'',
					al:{picUrl:''},
					},
				simiInfo:[],
				commentInfo:[],
				lyricInfo:[],
				lyricIndex:0,
				iconPlay:'icon-zanting',
				isPlayRotate:true,
				bgAudioManager:null
			}
		},
		onLoad(options) {
			// console.log(options.songId)
			this.getMusicInfo(options.songId)
			
		},
		onHide() {
			// clearInterval(this.timer)
		},
		onShow() {
			
		},
		onUnload() {		
			// #ifdef H5
			this.bgAudioManager.destroy()
			// #endif
			clearInterval(this.timer)
		},
		// #ifdef H5
		onBackPress() {
			this.bgAudioManager.destroy()
		},
		// #endif
		methods: {
			getMusicInfo(songId){
				
				this.$store.commit('NEXT_ID', songId)
				uni.showLoading({
					title: '请稍等，加载中……',
					mask: false
				});
				this.flag = false
				Promise.all([songDetails(songId),simiSong(songId),commentMusic(songId),lyric(songId),songUrl(songId)]).then((res)=>{
						if (res[0][1].data.code == "200"){
							let info = res[0][1].data.songs[0]
							this.songInfo = info
							// console.log(info)
						}
						if (res[1][1].data.code == "200"){
							let simi = res[1][1].data.songs
							this.simiInfo = simi
							// console.log(simi)
						}
						if (res[2][1].data.code == "200"){
							let comment = res[2][1].data.hotComments
							this.commentInfo = comment
							// console.log(comment)
							
						}
						if (res[3][1].data.code == "200"){
							let lyrics = res[3][1].data.lrc.lyric
							let re = /\[([^\]]+)\]([^\[]+)/g;
							var result = []
							lyrics.replace(re,($0,$1,$2)=>{
								result.push({"time":this.formatTimeToSec($1),"lyric":$2})
							})
							// console.log(result)
							this.lyricInfo = result
							
						}	
						if (res[4][1].data.code == "200"){
							let musicUrl = res[4][1].data.data[0].url
							// console.log(musicUrl)
							// #ifdef MP-WEIXIN
							this.bgAudioManager = uni.getBackgroundAudioManager();
							this.bgAudioManager.title =this.songInfo.name;
							// #endif
							
							// #ifdef H5
							if(!this.bgAudioManager){
								this.bgAudioManager = uni.createInnerAudioContext();
							}
							this.$store.commit('BG_AUDIO', this.bgAudioManager)
							this.iconPlay = 'icon-bofang',
							this.isPlayRotate = false,
							// #endif
							
							this.bgAudioManager.src = musicUrl || '';
							
							// #ifdef H5
							this.bgAudioManager.autoplay = true
							
							// #endif
							
							this.onLinsenLyric()
							this.bgAudioManager.onPlay(()=>{
								this.iconPlay='icon-zanting'
								this.isPlayRotate=true
								this.onLinsenLyric()							
							})
							this.bgAudioManager.onPause(()=>{
								this.iconPlay='icon-bofang'
								this.isPlayRotate=false
								clearInterval(this.timer)							
							})
							this.bgAudioManager.onEnded(()=>{
								// console.log(this.$store.state.nextId)
								this.getMusicInfo(this.$store.state.nextId)
							})
						}
						uni.hideLoading()
						this.flag = true
				})
			},
			
			formatTimeToSec(value){
				let arr = value.split(":")
				return  (Number(arr[0]*60) + Number(arr[1])).toFixed(1)
			},
			
			handleToPlay(){
				if(this.bgAudioManager.paused){
					this.bgAudioManager.play()
					
				}
				else{
					this.bgAudioManager.pause()
					
				}
			},
			
			onLinsenLyric(){
				clearInterval(this.timer)
				this.timer = setInterval(()=>{
					if(this.lyricInfo.length < 2){
						return
					}
					if (this.bgAudioManager.currentTime > this.lyricInfo[this.lyricInfo.length - 2].time){
						this.lyricIndex = this.lyricInfo.length - 1
						return
					}
					for(var i=0;i<this.lyricInfo.length-1;i++){
						if (this.bgAudioManager.currentTime > this.lyricInfo[i].time && this.bgAudioManager.currentTime < this.lyricInfo[i+1].time){
							this.lyricIndex = i
							// console.log(i)
							break
						}
					}
					// this.lyricIndex = this.lyricInfo.length-1
				},500)
			},
			
			handleToSimi(songId){
				this.getMusicInfo(songId)
			}
			
		}
	}
</script>

<style scoped>
.music-player{
	width: 580rpx;
	height: 580rpx;
	background-image: url(../../static/player.png);
	background-size: cover;
	position: relative;
	margin: 214rpx auto 0 auto;
}

.music-player image{
	width: 370rpx;
	height: 370rpx;
	border-radius: 50%;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	animation: 10s linear move infinite;
	animation-play-state: paused;
}

.music-player .detail-play-run{
	animation-play-state:running;
}
@keyframes move{
	from{transform: rotate(0deg);}
	to{transform: rotate(360deg);}
}
.music-player text{
	width: 100rpx;
	height: 100rpx;
	font-size: 100rpx;
	color: white;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}

.music-player view{
	width: 230rpx;
	height: 360rpx;
	background-image: url(../../static/stick.png);
	background-size: cover;
	left: 100rpx;
	right: 0;
	top: -200rpx;
	margin: auto;
	position: absolute;
}

.detail-lyric{
	height: 246rpx;
	font-size: 32rpx;
	line-height: 82rpx;
	overflow: hidden;
	color: #6f6e73;
	text-align: center;
}

.detail-lyric-wrap{
	transition: .5s;
}

.detail-lyric-item{
	height: 82rpx;
	
}

.detail-lyric-item.active{
	color: white;
}

.detail-like{
	margin: 0 30rpx;
}

.like-head{
	margin: 50rpx 0;
	font-size: 36rpx;
	color: white;
}

.like-item{
	display: flex;
	align-items: center;
	margin-bottom: 28rpx;
}

.like-item-img{
	width: 82rpx;
	height: 82rpx;
	border-radius: 20rpx;
	overflow: hidden;
	margin-right: 20rpx;
}

.like-item-img image{
	width: 100%;
	height: 100%;
}

.like-song{
	flex:1;
	color: #c6c2bf;
}

.like-song view:nth-child(1){
	font-size: 28rpx;
	color: white;
	margin-bottom: 12rpx;
}

.like-song view:nth-child(2){
	font-size: 22rpx;	
	display: flex;
	align-items: center;
}

.like-song image{
	width: 26rpx;
	height: 20rpx;
	margin-right: 10rpx;
}

.like-item text{
	font-size: 50rpx;
	color: #c6c2bf;
	
}

.detail-comment{
	margin: 0 30rpx;
}

.detail-comment-head{
	font-size: 36rpx;
	color: white;
	margin: 50rpx 0;
}

.comment-item{
	display: flex;
	margin-bottom: 28rpx;
}

.comment-icon{
	width: 64rpx;
	height: 64rpx;
	overflow: hidden;
	border-radius: 50%;
	margin-right: 18rpx;
}

.comment-icon image{
	width: 100%;
	height: 100%;
}

.comment-content{
	color: #cbcacf;
	flex: 1;
}

.comment-content-head{
	display: flex;
	justify-content: space-between;
}

.comment-people-info{
	
}

.comment-people-info :nth-child(1){
	font-size: 26rpx;
}

.comment-people-info :nth-child(2){
	font-size:20rpx;
}

.comment-like{
	font-size:28rpx;
}

.comment-content-words{
	font-size:28rpx;
	color: white;
	line-height: 40rpx;
	margin-top:20rpx;
	padding-bottom: 40rpx;
	border-bottom: 1px solid #e0e0e0 ;
}
</style>
